<template>
  <el-dialog
    title="管理单型号"
    :visible.sync="dialogVisible"
    top="5%"
    width="95%">
    <div id="create-model-dialog-content">

      <div class="row-box" style="height: 100px;">
        <div class="item">
          <div class="name">图片:</div>
          <div class="value" style="text-indent: 0px;">
            <el-upload
              style="margin-left: 10px; width: 90px; height: 85px;"
              :action="UploadFileUrl"
              :headers="getHeader()"
              name="myUploadFile"
              :show-file-list="false"
              :on-success="uploadImageSuccess">
              <img v-if="form.image" :src="form.image" class="avatar" style="width: 80px">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </div>


      <div class="row-box">
        <div class="item">
          <div class="name">价格:</div>
          <div class="value">
            <el-input-number :min="0" :max="99999999" class="my-input-number" v-model="form.price" :step="0.01" :controls="false"/>
          </div>
        </div>
        <div class="item">
          <div class="name">库存:</div>
          <div class="value">
            <el-input-number @change="checkNums"  :min="0" :max="99999999" class="my-input-number" v-model="form.nums" :step="1" :controls="false"/>
          </div>
        </div>
        <div class="c"></div>
      </div>


      <div class="row-box">
        <div class="item">
          <div class="name">积分:</div>
          <div class="value">
            <el-input-number @change="checkNums" :min="0" :max="99999999" class="my-input-number" v-model="form.score" :step="1" :controls="false"/>
          </div>
        </div>
        <div class="item">
          <div class="name">佣金(%):</div>
          <div class="value">
            <el-input-number :min="0" :max="50" class="my-input-number" v-model="form.commission" :step="1" :controls="false"/>
          </div>
        </div>
        <div class="c"></div>
      </div>

      <div class="row-box">
        <div class="item">
          <div class="name">团购人数:</div>
          <div class="value">
            <el-input-number @change="checkNums" :min="0" :max="100" class="my-input-number" v-model="form.groupNums" :step="1" :controls="false"/>
          </div>
        </div>
        <div class="item">
          <div class="name">团购价格:</div>
          <div class="value">
            <el-input-number :min="0" :max="9999999" class="my-input-number" v-model="form.groupPrice" :step="0.01" :controls="false"/>
          </div>
        </div>
        <div class="c"></div>
      </div>


      <div class="row-box">
        <div class="item">
          <div class="name">型号:</div>
          <div class="value">
            <el-input style="width: 90%" v-model="form.model" placeholder="请输入 型号"  :maxlength="50"></el-input>
          </div>
        </div>
        <div class="item">
          <div class="name">状态:</div>
          <div class="value">
            <el-switch style="width: 90%" v-model="form.status"></el-switch>
          </div>
        </div>

        <div class="c"></div>
      </div>


      <div class="row-box" v-if="specificationsDataArr && specificationsDataArr.length>0" v-for="(item,index) in specificationsDataArr">
        <div class="item sigle-item">
          <div class="name" v-text="item.name+':'"></div>
          <div class="value">
            <el-input v-if="item.type.id===0" style="width: 90%" v-model="form.specificationsData[item.name]"></el-input>
            <el-select v-if="item.type.id===1" style="width: 90%" v-model="form.specificationsData[item.name]">
              <el-option
                v-for="(_item,_index) in item.itemList"
                :key="_index"
                :label="_item"
                :value="_item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="c"></div>
      </div>

      <div class="row-box">
        <div class="item">
          <div class="name">是否默认:</div>
          <div class="value">
            <el-switch v-model="form.isDefault"></el-switch>
          </div>
        </div>
        <div class="item">
          <div class="name">&nbsp;</div>
          <div class="value">
            &nbsp;
          </div>
        </div>
        <div class="c"></div>
      </div>


      <div class="c"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确认选择</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'CreateModelDialog',
  data: function () {
    return {
      callback: null,
      specificationsDataArr:[],
      form: {
        nums: 0,
        price: 0,
        groupPrice: 0,
        groupNums: 0,
        commission: 0,
        score: 0,
        image: '',
        model: '',
        status: true,
        isDefault: false,
        specificationsData:{}
      },
      dialogVisible: false,
    }
  },
  watch:{
    dialogVisible:function () {
      if (!this.dialogVisible){
        this.form={
          nums: 0,
          price: 0,
          groupPrice: 0,
          groupNums: 0,
          commission: 0,
          score: 0,
          image: '',
          model: '',
          status: true,
          isDefault: false,
          specificationsData:{}
        }
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('CreateModelDialogCallBus', function (form,specificationsDataArr, callback) {
      $this.dialogVisible = true
      $this.specificationsDataArr = specificationsDataArr
      $this.callback = callback
      if (form.model && form.model.length>0){
        $this.form=Object.assign({},form)
      }
      $this.$forceUpdate()
    })

  },
  methods: {
    checkNums:function () {
      this.form.nums=this.toInt(this.form.nums)
      this.form.groupNums=this.toInt(this.form.groupNums)
      this.form.score=this.toInt(this.form.score)
      if (this.form.score>0){
        this.form.price=0
      }
      this.$forceUpdate()
    },
    uploadImageSuccess: function (res) {
      this.form.image = res.data
      this.$forceUpdate()
    },
    confirm: function () {
      if (this.form.model.length===0 || this.form.model.length>50){
        return this.$message.error('型号 长度在(1,50)个字符')
      }
      if (this.form.price<=0){
        if (this.form.score==0 && this.form.price==0){
          return this.$message.error('非积分商品 价格必须大于0')
        }
      }
      if (this.form.score>0){
        this.form.price=0
        this.form.groupNums=0
        this.form.groupPrice=0
      }
      if (this.form.nums<=0){
        return this.$message.error('库存 必须大于等于0')
      }
      if (!this.form.model || this.form.model.length<=1){
        return this.$message.error('型号 不能为空')
      }
      if (typeof this.callback === 'function') {
        this.callback(this.form)
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style>
#manager-model-dialog-content {
}

#create-model-dialog-content > .row-box {
  padding-top: 5px;
  padding-bottom: 5px;
  /*margin-top: 10px;*/
  min-height: 50px;
  line-height: 25px;
  background: #f1f1f1;
  float: left;
  width: 100%;
}

#create-model-dialog-content > .row-box > .item {
  width: 50%;
  float: left;
  text-indent: 5px;
}
#create-model-dialog-content > .row-box > .item.sigle-item{
  width: 70%;
}

#create-model-dialog-content > .row-box > .item > .value{
  text-indent: 5px;
}

.el-icon-plus.avatar-uploader-icon{
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-indent: 0px;
  font-size: 20px;
  text-align: center;
  border: 1px dashed #999999;
  border-radius: 5px;
}
</style>
